=<template>
    <div>
        <div style="display: flex;justify-content: space-between;height: 30px;padding:10px 0;">
            <div style="font-size: 16px;font-weight: 500;margin-bottom:10px;">节点管理</div>
        </div>
        <div style="margin-bottom:15px;">
            <a-space>
                <a-button size="small" @click="batchDeleteHandle()">删除</a-button>
                <a-button size="small" @click="getDataList()">刷新</a-button>
                <a-button size="small" @click="serverConfig()">查看服务器配置</a-button>
                <a-button type="primary" size="small" @click="addOrUpdateHandle()">新增节点</a-button>
            </a-space>
        </div>
        <div>
            <a-table row-key="id" :data="dataList" column-resizable :pagination="pagination"
                :row-selection="rowSelection" v-model:selectedKeys="dataListSelections" :loading="dataListLoading">
                <template #columns>
                    <a-table-column title="节点地址" data-index="destination"></a-table-column>
                    <a-table-column title="优先级" data-index="priority"></a-table-column>
                    <a-table-column title="参数" data-index="attrs"></a-table-column>
                    <a-table-column title="状态" data-index="status" :width="140">
                        <template #title>
                            状态
                            <a-popover size="small">
                                <span><icon-question-circle style="font-size:13px;" /></span>
                                <template #content>
                                    节点健康度探测：会定期探测节点服务健康度
                                </template>
                            </a-popover>
                        </template>
                        <template #cell="{ record }">
                            <span class="grid-button">
                                <span v-if="record.nodeFlags == 'A'"><icon-check-circle-fill
                                        style="font-size: 13;color:rgb(var(--green-7))" />活动</span>
                                <span v-if="record.nodeFlags == 'I'"><icon-close-circle-fill
                                        style="font-size: 13px;color:rgb(var(--red-7));" />非活动</span>
                                <span v-if="record.nodeFlags == 'T'"><icon-exclamation-circle-fill
                                        style="font-size: 13px;color:rgb(var(--orange-7));" />尝试</span>
                                <span v-if="record.nodeFlags == 'D'"><icon-minus-circle-fill
                                        style="font-size: 13px;color:rgb(var(--red-7));" />禁用</span>
                            </span>
                        </template>
                    </a-table-column>
                    <a-table-column title="操作" :width="120">
                        <template #cell="{ record }">
                            <span class="grid-button">
                                <a @click="addOrUpdateHandle(record.id)" style="color:#5e7ce0;">修改</a>
                                <a @click="deleteHandle(record.id)" style="color:#C7000B">删除</a>
                            </span>
                        </template>
                    </a-table-column>
                </template>
            </a-table>
        </div>

        <add-or-update ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
        <server-config ref="serverConfig"></server-config>
    </div>
</template>
<script>
import mixinViewModule from '../../mixins/view-module.js'
import AddOrUpdate from './dispatcher-add-or-update.vue'
import ServerConfig from './dispatcher-server-config.vue'
export default {
    mixins: [mixinViewModule],
    components: {
        AddOrUpdate,
        ServerConfig
    },
    data() {
        return {
            mixinViewModuleOptions: {
                createdIsNeed: true,
                getDataListURL: '/api/dispatcher/page',
                getDataListIsPage: true,
                deleteURL: '/api/dispatcher/del',
                deleteIsBatch: true
            },
        }
    },
    methods: {
        serverConfig() {
            this.$refs.serverConfig.init()
        }
    }
}
</script>
<style scoped></style>